<template>
  <div>
    <el-menu
        :default-active="indexMenu"
        background-color="#073893"
        text-color="#ececec"
        class="el-menu-vertical-demo">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/user">
            <el-menu-item index="1-1">用户管理</el-menu-item>
          </router-link>
          <router-link to="/role">
            <el-menu-item index="1-2">角色权限</el-menu-item>
          </router-link>
          <router-link to="/org">
            <el-menu-item index="1-3">组织机构</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/logManager">
            <el-menu-item index="2-1">日志管理</el-menu-item>
          </router-link>
          <router-link to="/paramConfig">
            <el-menu-item index="2-2">数据对接配置</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import api from '@/utils/api';

export default {
  data() {
    return {
      indexMenu: '1-1'
    }
  },
  mounted() {
    this.currentPath()
  },
  methods: {
    currentPath() {
      let url = this.$route.path.split('/').pop()
      switch (url) {
        case 'user':
          this.indexMenu = '1-1';
          break;
        case 'role':
          this.indexMenu = '1-2';
          break;
        case 'paramConfig':
          this.indexMenu = '2-1';
          break;

      }
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
      ``
    }
  }
};
</script>
<style scoped>


.el-menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}



.el-menu {
  width: 200px;
  height: calc(100vh - 60px);
  font-size: 17px;
  color: #ececec;
  overflow-y: hidden;
}

/deep/.el-menu .el-menu-item.is-active {
  color: #2E95FB !important;
  background: linear-gradient(270deg, #062d76 0%, #062d76 100%)!important;
}


/deep/ .el-submenu__title{
  font-size: 17px;
  color: #ececec;
}

/deep/ [data-v-77905b55] .el-menu-item {
  font-size: 17px;
  color: #ececec;
}

i {
  margin-right: 10px;
}

a {
  text-decoration: none;
}
</style>